<template>
  <view>
    <!-- 根据用户身份显示不同内容 -->

    <!-- 搜索框 -->
    <uni-search-bar v-model="searchQuery" @confirm="filterData"></uni-search-bar>

    <!-- 教师显示家长列表 -->
    <view v-if="isTeacher" v-for="parent in filteredParents" :key="parent.id" class="parent-box">
      <image :src="parent.avatar" alt="" class="parent-avatar" />
      <view class="parent-info">
        <view class="parent-name">姓名: {{ parent.name }}</view>
        <view class="parent-name">课程: {{ parent.course }}</view>
        <view class="parent-background">需求学历: {{ parent.background }}</view>
        <view class="parent-sex">需求性别: {{ parent.sex }}</view>
        <view class="parent-content">需求内容: {{ parent.content.slice(0, 50) }}...</view>
        <view class="parent-salary">提供薪资: {{ parent.salary }}</view>
        <view class="detail-button" @click="goToDetailPage(parent.account, parent.course)">
          查看详情
        </view>
      </view>
    </view>

    <!-- 家长显示教师列表 -->
    <view v-if="isParent" v-for="teacher in filteredTeachers" :key="teacher.id" class="teacher-box">
      <image :src="teacher.avatar" alt="" class="teacher-avatar" />
      <view class="teacher-info">
        <view class="teacher-name">姓名: {{ teacher.name }}</view>
        <view class="teacher-name">课程: {{ teacher.course }}</view>
        <view class="teacher-speciality">专业: {{ teacher.speciality }}</view>
        <view class="teacher-background">学历: {{ teacher.background }}</view>
        <view class="teacher-introduction">简介: {{ teacher.introduction }}</view>
        <view class="detail-button" @click="goToDetailPage(teacher.account, teacher.course)">
          查看详情
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isTeacher: false, // 判断用户是否为教师
      teachers: [],
      parents: [],
      isParent: true, // 判断用户是否为家长
      searchQuery: '', // 搜索框输入内容
    };
  },
  computed: {
    // 筛选家长列表
    filteredParents() {
      if (this.searchQuery) {
        return this.parents.filter(parent =>
          parent.name.includes(this.searchQuery)
        );
      }
      return this.parents;
    },
    // 筛选教师列表
    filteredTeachers() {
      if (this.searchQuery) {
        return this.teachers.filter(teacher =>
          teacher.name.includes(this.searchQuery)
        );
      }
      return this.teachers;
    }
  },
  onLoad() {
    // 从缓存中获取用户信息并判断身份
    const user = uni.getStorageSync('xm-user');
    this.isTeacher = (user.role === 'teacher');
    this.isParent = !this.isTeacher; // 家长角色
    this.selectedCourse = user.course || 'Math'; // 默认课程

    // 根据身份加载不同的数据
    if (this.isTeacher) {
      this.loadParents();
    } else {
      this.loadTeachers();
    }
  },
  methods: {
    loadParents() {
      // 请求获取家长发布的需求数据
      this.$request.get('/need/selectAll').then(res => {
        if (res.code === '200') {
          this.parents = res.data || [];
        } else {
          console.error('获取家长数据失败:', res.msg);
        }
      }).catch(error => {
        console.error('请求失败:', error);
      });
    },
    loadTeachers() {
      // 请求获取教师数据
      this.$request.get('/teach/selectAll').then(res => {
        if (res.code === '200') {
          this.teachers = res.data || [];
        } else {
          console.error('获取教师数据失败:', res.msg);
        }
      }).catch(error => {
        console.error('请求失败:', error);
      });
    },
    goToDetailPage(account, course) {
      // 跳转到详情页面
      const page = this.isParent ? 'teacherDetail' : 'needDetail';
      wx.navigateTo({
        url: `/pages/detail/${page}?account=${account}&course=${course}`
      });
    },
    filterData() {
      // 触发搜索
    }
  }
};
</script>

<style>
.title {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
  margin: 20rpx 0;
  color: #333;
}

.parent-box, .teacher-box {
  display: flex;
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
}
.parent-avatar, .teacher-avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 20rpx;
}
.parent-info, .teacher-info {
  flex: 1;
}
.parent-name, .teacher-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.parent-background, .parent-sex, .parent-content, .parent-salary,
.teacher-speciality, .teacher-background, .teacher-introduction {
  margin-bottom: 10rpx;
  font-size: 28rpx;
  color: #666;
}
.detail-button {
  margin-top: 20rpx;
  padding: 10rpx 20rpx;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  border-radius: 5rpx;
  cursor: pointer;
}
</style>
